/* @flow */

import config from 'core/config'
import { warn, cached } from 'core/util/index'
import { mark, measure } from 'core/util/perf'

import Vue from './runtime/index'
import { query } from './util/index'
import { compileToFunctions } from './compiler/index'
import { shouldDecodeNewlines, shouldDecodeNewlinesForHref } from './util/compat'

const idToTemplate = cached(id => {
  const el = query(id)
  return el && el.innerHTML
})
// 首先缓存了原型上的 $mount 方法，再重新定义该方法
/**
 * 原先原型上的 $mount 方法在 src/platform/web/runtime/index.js 中定义，这种设计方式，完全是因为代码可以复用，因为它是可以被 runtime only 版本的 Vue 直接使用
 * $mount(这里指src/platform/web/runtime/index.js原先的$mount)：实际调用（mountComponent：src/core/instance/lifecycle.js）
 * $mount 方法支持传入 2 个参数
 * 第一个是 el，它表示挂载的元素，可以是字符串，也可以是 DOM 对象，如果是字符串在浏览器环境下会调用 query 方法转换成 DOM 对象的
 * 第二个参数是和服务端渲染相关，在浏览器环境下我们不需要传第二个参数
 */
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  /**
   * query：DOM选择query  这里就是你传递一个字符串或者一个DOM对象都可以，就是在这个方法内实现的
   * ./vue/src/platforms/web/util/index.js
   */
  el = el && query(el)

  // 对 el 做了限制，Vue 不能挂载在 body、html 这样的根节点上
  /* istanbul ignore if */
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
    )
    return this
  }

  const options = this.$options
  // resolve template/el and convert to render function
  /**
   * 如果没有定义 render 方法，则会把 el 或者 template 字符串转换成 render 方法
   * 在 Vue 2.0 版本中，所有 Vue 的组件的渲染最终都需要 render 方法，无论我们是用单文件 .vue 方式开发组件，
   * 还是写了 el 或者 template 属性，最终都会转换成 render 方法，那么这个过程是 Vue 的一个“在线编译”的过程，
   * 它是调用 compileToFunctions 方法实现的
   */
  if (!options.render) {
    // 没有render函数时候优先考虑template属性
    let template = options.template
    if (template) { // 如果有template，将会对template进行处理
      // 如果是字符串
      if (typeof template === 'string') {
        if (template.charAt(0) === '#') {
          // template是ID
          // idToTemplate方法：通过query获取该ID获取DOM并把该元素的innerHTML 作为模板
          template = idToTemplate(template)
          /* istanbul ignore if */
          if (process.env.NODE_ENV !== 'production' && !template) {
            warn(
              `Template element not found or is empty: ${options.template}`,
              this
            )
          }
        }
      } else if (template.nodeType) {
        // template 的类型是元素节点,则使用该元素的 innerHTML 作为模板
        template = template.innerHTML
      } else {
        // 若 template既不是字符串又不是元素节点，那么在开发环境会提示开发者传递的 template 选项无
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this)
        }
        return this
      }
    } else if (el) {
      // 如果template 木有DOM innerHTML 则会在外面包一个
      template = getOuterHTML(el)
    }
    // template: 存储着最终用来生成渲染函数的字符串
    if (template) {
      /* istanbul ignore if */
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile')
      }
      // 获取转换后的render函数与staticRenderFns,并挂在$options上
      const { render, staticRenderFns } = compileToFunctions(template, {
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns

      /* istanbul ignore if */
      // 用来统计编译器性能, config是全局配置对象
      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
        mark('compile end')
        measure(`vue ${this._name} compile`, 'compile', 'compile end')
      }
    }
  }
  // mount：这个是我们之前缓存的$mount，代码会走到 src\platforms\web\runtime\index.js 里面，因为这个mount是这个文件下面的
  return mount.call(this, el, hydrating)
}

/**
 * Get outerHTML of elements, taking care
 * of SVG elements in IE as well.
 */
function getOuterHTML (el: Element): string {
  if (el.outerHTML) {
    return el.outerHTML
  } else {
    const container = document.createElement('div')
    container.appendChild(el.cloneNode(true))
    return container.innerHTML
  }
}

Vue.compile = compileToFunctions

export default Vue
